import QtQuick

Rectangle {
    width: 400
    height: 400

    Flipable {
        id: flipable
        width: 300
        height: 300
        anchors.centerIn: parent

        property bool flipped: false

        front: Image {
            source: "qrc:/images/card_front.png"
            anchors.fill: parent
        }

        back: Image {
            source: "qrc:/images/card_back.png"
            anchors.fill: parent
        }

        transform: [
            Rotation {
                id: rotation
                origin.x: flipable.width/2
                origin.y: flipable.height/2
                axis.x: 0; axis.y: 1; axis.z: 0
                angle: 0
            }
        ]

        states: State {
            name: "back"
            when: flipable.flipped
            PropertyChanges { target: rotation; angle: 180 }
        }

        transitions: Transition {
            SequentialAnimation {
                NumberAnimation {
                    target: rotation
                    property: "angle"
                    duration: 1000
                    easing.type: Easing.InOutQuad
                }
                ScriptAction {
                    script: console.log("翻转完成")
                }
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: flipable.flipped = !flipable.flipped
        }
    }
}
